<template>
	<view class="content">
		<!-- 搜索栏 -->
		<view class="search-box">
			<image lazy-load="true"  src="../../static/images/search-ico.png" class="search-ico"></image>
			<input type="text" class="search" confirm-type="search" @confirm="search_good" placeholder="搜索您想要的商品" placeholder-style="color:#cccccc">
		</view>
		<!-- 搜索栏 end -->
		<view class="classify-content">
			<!-- 分类左侧导航 -->
			<view class="left">
				<view class="title" @click="setStyle('1')" :class="{'active':isActive=='1'}"><view class="text">推荐</view></view>
				<view v-for="(item , key) in parentDetail" :key="key" class="title" @click="setStyle(item.id)" :class="{'active':isActive==item.id}"><view class="text">{{item.name}}</view></view>
			</view>
			<!-- 分类左侧导航 end -->
			<!-- 分类右侧内容 -->
			<view class="right">
				<view class="classify-banner">
					<image lazy-load="true"  :src="image_url" class="classify-banner"></image>
				</view>
				<view class="item-list">
					<view class="items" v-for="(item , key) in detail" :key="key" @click="goGoodsList(item.id)">
						<view class="item-img"><image lazy-load="true"  :src="item.logo" mode="aspectFit" class="item-img"></image></view>
						<view class="item-title">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive:'1',
				parentDetail:[
					
				],  //商品分类 总类
				detail:[],
				image_url:''
			}
		},
		onLoad() {
			var self = this;
			this.$request.request({
				url:'/category/list',
				data:{
					parent_id:0
				},
				success:function(res){
					if(res.code==200){
						self.parentDetail = res.result;
						self.parentDetail.forEach((item,index)=>{
							self.parentDetail[index].logo = self.$imgUrl + item.logo
						})
						console.log(self.parentDetail)
					}else{
						
					}
				}
			});
			this.getRestData();
			
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name, // 分享标题
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '我发现了一个很不错的商城，买家具有超大实惠！', // 分享描述
				link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      console.log(res.target)
		    }
		    return {
		      title: this.$request.share_title,
		      path: '/pages/index/index'
		    }
		  },
		methods: {
			setStyle(num){
				var self = this;
				this.isActive = num;
				if(num==1){
					this.getRestData()
				}else{
					this.$request.request({
						url:'/category/list',
						data:{
							parent_id:num
						},
						success:function(res){
							if(res.code==200){
								var x = res.result;
								x.forEach((item,index)=>{
									x[index].logo = self.$http_img(item.logo);
								});
								self.detail = x
							}else{
								
							}
						}
					});
				}
			},
			getRestData(){
				var self = this;
				this.$request.request({
					url:'/category/recommend',
					data:{
						
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							self.image_url=self.$http_img(x.image);
							x.categories.forEach((item,index)=>{
								x.categories[index].logo = self.$http_img(item.logo);
							});
							self.detail = x.categories
						}else{
							
						}
					}
				})
			},
			goGoodsList(id){
				uni.navigateTo({
				    url: '../good-list/good-list?id='+id
				});
			},
			search_good(e){
				uni.navigateTo({
				    url: '../good-list/good-list?search='+encodeURIComponent(e.detail.value)
				});
			}
		}
	}
</script>

<style>
	@import url("classify-more.css");
</style>
